
function init() {
	createSlider();
	createMap();
}

var slider;
var map;
var markersArray = [];


function createMap(){

    var latlng = new google.maps.LatLng ((north+south)/2,(east+west)/2);

    var myOptions = { zoom: zoom,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.TERRAIN
                    };
	
	// add image overlay

    map = new google.maps.Map(document.getElementById("map"), myOptions); 
	
	
	
	/*
	rectangle = new google.maps.Rectangle();
	var rectOptions = {
		  fillColor: "#000000",
		  fillOpacity: 0.65,
		  map: map,
		  zIndex: 1,
		  bounds: new google.maps.LatLngBounds(new google.maps.LatLng(south,west),new google.maps.LatLng(north,east))
	};
	rectangle.setMap(map);
	rectangle.setOptions(rectOptions);
	*/
	/*
	var imageBounds = new google.maps.LatLngBounds(new google.maps.LatLng(south,west),new google.maps.LatLng(north,east));
	shadeBackground = new google.maps.GroundOverlay("shade.png",imageBounds,{zIndex:1});
	shadeBackground.setMap(map);
	*/
	
	loadOverlay(1);
	
	var imageBounds = new google.maps.LatLngBounds(new google.maps.LatLng(south,west),new google.maps.LatLng(north,east));
	shadeBackground = new ProjectedOverlay(map,'shade.png', imageBounds, {percentOpacity:70}) ;
	
	
	var bikeLayer = new google.maps.BicyclingLayer();
	bikeLayer.setMap(map);
}


function loadOverlay(day) {

	var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(south,west),
    new google.maps.LatLng(north,east));
	
	
	for(i=0; i<24;i++) {
		markersArray[i] = new google.maps.GroundOverlay(
		basedir[day]+i+".png",
		imageBounds);		
	}
	
	markersArray[slider.value].setMap(map);
}


function createSlider() {
  slider = new Control.Slider('handle','track', {
	range: $R(0,23), values: $R(0,23),
	onSlide: function(value) {update(value);},
	onChange: function(value) {update(value);}
  });
}

function update(value) {

	document.getElementById("hour").value = value;
	
	for (i=0; i<24;i++) {
		markersArray[i].setMap(null);
	}
	markersArray[value].setMap(map);
}

function enterTime() {
	var hour = document.getElementById("hour").value;
	slider.setValue(hour);
}

var c;
var t;
var timer_is_on=0;

function run() {
	var state = document.getElementById("run").value;
	if(state == "start") {
		document.getElementById("run").value = "stop";
		slider.setDisabled();
		document.getElementById("hour").disabled = true;
		var radio = document.getElementsByName("day");
		for(i=0; i<radio.length;i++){
			radio[i].disabled = true;
		}
		
		
		if (!timer_is_on) {
			c = slider.value;
			timer_is_on=1;
			timedCount();
		}	
	}
	else {
		slider.setEnabled();
		document.getElementById("hour").disabled = false;
		var radio = document.getElementsByName("day");
		for(i=0; i<radio.length;i++){
			radio[i].disabled = false;
		}
		document.getElementById("run").value = "start";
		clearTimeout(t);
		timer_is_on=0;
	}
}


function timedCount() {
	
	if(c==24) {
		c = 0;
		var radio = document.getElementsByName("day");
		for(i=0; i<radio.length;i++){
			if(radio[i].checked == true) {
				radio[i].checked = false;
				radio[(i+1)%radio.length].checked = true;
				changeDay((i+1)%radio.length);
			}
		}
	}
	
	document.getElementById('hour').value=c;
	slider.setValue(c);
	c++;
	t=setTimeout("timedCount()",1000);
}

function changeDay(day) {

	for (i=0; i<24;i++) {
		markersArray[i].setMap(null);
	}

	loadOverlay(day);
}